<template>
	<a-modal v-bind="options" class="import-data-dialog">
		<vxe-grid ref="grid" v-bind="gridOptions" class="energy">
			<template #toolbar>
				<vxe-toolbar>
					<template #buttons>
						<div class="toolbar-action">
							导入时间：
							<span>{{ props.data.createTime }}</span>
						</div>

						<div class="toolbar-action">
							导入门店：
							<span>{{ props.data.storeName }}</span>
						</div>

						<div class="toolbar-action">
							导入人员：
							<span>{{ props.data.createName }}</span>
						</div>

						<div class="toolbar-action">
							人员所属部门：
							<span>{{ props.data.deptName }}</span>
						</div>
					</template>
				</vxe-toolbar>
			</template>
		</vxe-grid>
	</a-modal>
</template>

<script lang="ts" setup>
	import {watchEffect, toRef, reactive, ref, watch} from 'vue'
	import {VxeGridInstance, VxeGridProps} from 'vxe-table'
	import {pagerConfig, proxyConfigProps} from 'yuxin-base/src/utils/vxe-table'
	import DATE_FORMAT from 'yuxin-base/src/utils/date'
	import billApi from '@/api/bill-api'

	const props = defineProps<{
		visible: boolean
		id: null | string
		data: any
	}>()

	const emits = defineEmits(['update:visible', 'close'])
	const options = reactive({
		title: '导入数据',
		width: 1300,
		centered: true,
		maskClosable: false,
		destroyOnClose: true,
		footer: false,
		bodyStyle: {padding: '15px'},
		visible: toRef(props, 'visible'),
		onCancel() {
			emits('update:visible', false)
			setTimeout(() => emits('close'), 100)
		}
	})

	const defaultParams = reactive<any>({
		refId: ''
	})

	const storeOptions = ref<any>([])

	// 表头
	const grid = ref<VxeGridInstance>()
	const gridOptions = reactive<VxeGridProps>({
		height: 'auto',
		showOverflow: true,
		rowConfig: {
			height: 60,
			isHover: true
		},
		columns: [
			{
				title: '门店',
				minWidth: 150,
				fixed: 'left',
				align: 'left',
				field: 'storeName'
			},
			{
				title: '小区/项目名称',
				minWidth: 150,
				align: 'left',
				field: 'communityName'
			},
			{
				title: '楼栋号',
				minWidth: 100,
				align: 'left',
				field: 'building'
			},
			{
				title: '单元',
				minWidth: 100,
				align: 'left',
				field: 'unit'
			},
			{
				title: '房间号',
				minWidth: 100,
				align: 'left',
				field: 'roomNumber'
			},
			{
				title: '费用类型',
				minWidth: 100,
				align: 'left',
				field: 'feeType'
			},
			{
				title: '费用应收日期',
				minWidth: 150,
				align: 'left',
				field: 'feeDate'
			},
			{
				title: '费用开始日期',
				minWidth: 150,
				align: 'left',
				field: 'feeBeginDate'
			},
			{
				title: '费用结束日期',
				minWidth: 150,
				align: 'left',
				field: 'feeEndDate'
			},
			{
				title: '费用',
				minWidth: 100,
				align: 'left',
				field: 'totalFee'
			}
		],
		pagerConfig: pagerConfig,
		proxyConfig: {
			props: proxyConfigProps,
			ajax: {
				query({page: {currentPage: current, pageSize: size}}) {
					return billApi.recordPage({...defaultParams, current, size})
				}
			}
		}
	})

	const getList = (page?: any) => {
		grid.value?.commitProxy(page === 1 ? 'reload' : 'query')
	}

	watchEffect(() => {
		if (props.visible) {
			defaultParams.refId = props.id
		}
	})
</script>

<style lang="less">
	.import-data-dialog {
		.ant-modal-body {
			overflow: auto;
			min-height: 600px;
			max-height: 900px;
			height: calc(100vh - 150px);
		}

		.vxe-toolbar {
			padding: 5px 0 20px;
		}

		.toolbar-action {
			color: #86909cff;
			width: 25%;

			span {
				color: #000000d9;
			}
		}

		.select-width {
			width: 275px;
		}
	}
</style>
